<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增接口信息')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-task_interface-add">
            <div class="form-group">    
                <label class="col-sm-2 control-label is-required">接口描述：</label>
                <div class="col-sm-8">
                    <input name="desc" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label is-required">接口地址：</label>
                <div class="col-sm-8">
                    <input name="mapping" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label">http方式：</label>
                <div class="col-sm-8">
                    <select name="httpMethod" class="form-control m-b" th:with="type=${@dict.getType('http_method')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">content_type：</label>
                <div class="col-sm-8">
                    <input name="contentType" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">query参数：</label>
                <div class="col-sm-8">
                    <textarea name="queryParam" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">body参数：</label>
                <div class="col-sm-8">
                    <textarea name="bodyParam" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">path参数：</label>
                <div class="col-sm-8">
                    <textarea name="pathParam" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label" th:title="${expDesc}"><i class="fa fa-question-circle-o"></i>判定表达式：</label>
                <div class="col-sm-8">
                    <textarea id="judgeExpression" name="judgeExpression" class="form-control"></textarea>
                </div>
                <ul class="col-sm-2" id="suggest"></ul>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label">状态：</label>
                <div class="col-sm-8">
                    <select name="status" class="form-control m-b" th:with="type=${@dict.getType('sys_normal_disable')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var expNames = [[${expNames}]];
        var suggestArray = expNames.split(',');

        var prefix = ctx + "tester/task_interface"
        $("#form-task_interface-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-task_interface-add').serialize());
            }
        }

        $('#judgeExpression').on('keydown',function(event){
            // console.info("按键编号:"+event.keyCode);
            if(event.keyCode == 9){
                event.preventDefault();//阻止浏览器默认动作
                var text = $('#judgeExpression').val();
                var pureText = "";
                for (var i=0; i<text.length; i++){
                    var c = text.charAt(text.length-1-i);
                    if(c == '.' || c == '=' || c == ' '){
                        break;
                    }
                    pureText = c + pureText;
                }
                pureText = pureText.trim();
                for(var i=0; i<suggestArray.length; i++){
                    var exp = suggestArray[i];
                    if(exp.startsWith(pureText)){
                        // console.info("toAppend="+exp.substr(pureText.length));
                        var toAppend = exp.substr(pureText.length);
                        $("#judgeExpression").val(text+toAppend);
                        return;
                    }
                }
            }
        });

        $('#judgeExpression').on('input', function() {
            var text = $(this).val();
            var pureText = "";
            for (var i=0; i<text.length; i++){
                var c = text.charAt(text.length-1-i);
                if(c == '.' || c == '=' || c == ' '){
                    break;
                }
                pureText = c + pureText;
            }
            pureText = pureText.trim();

            $("#suggest").empty();
            for(var i=0; i<suggestArray.length; i++){
                var exp = suggestArray[i];
                if(exp.startsWith(pureText)){
                    $("#suggest").append("<li>"+exp+"</li>");
                }
            }
        })
    </script>
</body>
</html>